<template>
  <div class="roleedit">
    <el-dialog
      :title="text"
      :visible.sync="dialogRole"
      width="40%">
      <el-form :model="form" ref="form" size="medium" label-width="80px">
        <el-form-item label="角色名称:" prop="role_name">
          <el-input v-model="form.role_name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">已启用</el-radio>
            <el-radio :label="1">已禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限">
          <el-tree
            :data="menus"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :default-checked-keys="this.form.checked_menus"
            @check="currentChecked"
            highlight-current></el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'RoleEdit',
    props:{
      rows: {}
    },
    data() {
      return {
        text: '',
        dialogRole: false,
        form: {
          id: '',
          role_name: '',
          status: '',
          checked_menus: []
        },
        menuTree: [],
        menus: [
          {
            id: 1,
            label: "销售管理",
            children: [
              {
                id: 6,
                label: "新增销售订单"
              },{
                id: 7,
                label: "售后管理"
              },{
                id: 8,
                label: "销售单记录"
              }
            ]
          },{
            id: 2,
            label: "库存管理",
            children: [
              {
                id: 9,
                label: "采购入库"
              },{
                id: 10,
                label: "购货单列表"
              },{
                id: 11,
                label: "库存盘点"
              },{
                id: 12,
                label: "库存调拨"
              },{
                id: 13,
                label: "损耗列表"
              },{
                id: 14,
                label: "仓库管理"
              }
            ]
          },{
            id: 3,
            label: "供货商管理"
          },{
            id: 4,
            label: "代理商管理",
            children: [
              {
                id: 15,
                label: "代理商等级"
              },{
                id: 16,
                label: "代理商列表"
              }
            ]
          },{
            id: 5,
            label: "商品管理",
            children: [
              {
                id: 17,
                label: "商品分类"
              },{
                id: 18,
                label: "商品列表"
              },{
                id: 19,
                label: "商品规格"
              }
            ]
          }
        ]
      }
    },
    methods: {
      //打开弹窗-编辑
      openEdit() {
        this.dialogRole = true;
        this.text = "编辑角色"
        this.form = {
          id: this.rows.id,
          role_name: this.rows.role_name,
          status: this.rows.status,
          checked_menus: this.rows.rules
        }
        // this.menuTree = this.form.checked_menus;
        console.log('form',this.form)
      },
      //打开弹窗-新增
      openAdd() {
        this.dialogRole = true;
        this.text = "新增角色"
      },

      currentChecked (nodeObj, SelectedObj) {
        //console.log(SelectedObj)
        //console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
        //console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
        this.form.checked_menus = SelectedObj.checkedKeys;
      },

      //保存
      save () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('form1',this.form)
            this.dialogRole = false;
            this.form = {
              id: '',
              role_name: '',
              status: '',
              checked_menus: []
            };
            this.$refs.tree.setCheckedKeys([]);
            console.log('form2',this.form)
            this.$message.success('保存成功')
            // saveAdmin(this.formValidate)
            //   .then(res => {
            //     this.$Message.success(res.msg)
            //     setTimeout(() => this.close(), 1000)
            //   }).catch(err => {
            //     this.$Message.error(err.msg)
            //   })
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      //关闭
      close() {
        this.dialogRole = false;
        this.form = {
          id: '',
          role_name: '',
          status: '',
          checked_menus: []
        }
        this.$refs.tree.setCheckedKeys([]);
      }
    }
  }
</script>

<style>
</style>
